<template>
<div class="cascader" v-clickoutside="closeHandle">
    <div class="selectBox" @click="selectHandle" :style="setStyle">
        <span class="placeholder" v-if="checkList.length<=0">请选择</span>
        <span v-if="checkList.length > 0">
            <span class="showItem" v-for="(it) in checkList" :key="it.id">
                {{it.name}}
                <i v-if="it.type == 1" class="all">(全部)</i>
                <i class="del icon" @click.stop="delCheck(it)">&#xe632;</i>
            </span>
        </span>
        <span class="lab icon">&#xe61e;</span>
    </div>
    <div class="selectItemsBox" v-show="selectOpen" :style="selStyle">
        <el-checkbox-group v-model="checkDataList" @change="changehandle">
            <div class="selectItems">
                <div class="itemsBox">
                    <div class="items" v-for="(item, index) in orgList" :key="index">
                        <el-checkbox :label="item.id" @change="checkListHander(item.id, 'A')"><i></i></el-checkbox>
                        <span @click="getItemDate(item.id, 'A')" :class="{act: item.id == actId[0]}">{{item.name}}</span>
                    </div>
                </div>
                <div class="itemsBox" v-show="selectBDataes && selectBDataes.length > 0">
                    <div class="items" v-for="item in selectBDataes" :key="item.id">
                        <el-checkbox :label="item.id" @change="checkListHander(item.id, 'B')"><i></i></el-checkbox> <span @click="getItemDate(item.id, 'B')" :class="{act: item.id == actId[1]}">{{item.name}}</span>
                    </div>
                </div>
                <div class="itemsBox" v-show="selectCDataes && selectCDataes.length > 0">
                    <div class="items" v-for="item in selectCDataes" :key="item.id">
                        <el-checkbox :label="item.id" @change="checkListHander(item.id)"><i></i></el-checkbox> <span @click="getItemDate(item.id, 'C')">{{item.name}}</span>
                    </div>
                </div>
                <div class="itemsBox" v-show="selectDDataes && selectDDataes.length > 0">
                    <div class="items" v-for="item in selectDDataes" :key="item.id">
                        <el-checkbox :label="item.id" @change="checkListHander(item.id)"><i></i></el-checkbox> <span @click="getItemDate(item.id, 'D')">{{item.name}}</span>
                    </div>
                </div>
            </div>
        </el-checkbox-group>
        <div class="seve"><span @click="closeHandle()">保存</span></div>
    </div>
</div>
</template>

<script>
const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
        function documentHandler(e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false;
            }
            // 判断指令中是否绑定了函数
            if (binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                binding.value(e);
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    update() {},
    unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    },
};
export default {
    name: 'Dashboard',
    props: {
        closeSelectOpen: Boolean,
        checkListDataes: {
            type: Array,
            default: function () {
                return []
            }
        },
        dialogVisible: Boolean,
        'setStyle': String,
        'selStyle': String,
        'includeMember': {
            type: Number || String,
            default: 0
        }
    },
    data() {
        return {
            orgList: [],
            checkDataList: [],
            openitems: 2,
            memberlist: [],
            actId: [],
            selectBDataes: [],
            selectCDataes: [],
            selectDDataes: [],
            checked: '',
            selectOpen: false,
            checkList: [],
            checkIdList: [],
            show: true,
            bufferData: [],
            checkIdListBuffer: []
        }
    },
    directives: {
        clickoutside
    },
    created() {
        this.getAdminList()
        this.initCheckList()
    },
    watch: {
        dialogVisible(val, oldVal) {
            if (val) {
                this.initCheckList()
            } else {
                this.checkList = []
                this.checkDataList = []
            }
        }
    },
    methods: {
        changehandle(val) {
            let newArr = []
            this.bufferData.map(item => {
                this.checkDataList.map(it => {
                    if (item.id == it) {
                        newArr.push(item)
                    }
                })
            })
            this.checkList = newArr
            console.log(2323, this.checkDataList)
        },
        // 获取部门列表
        getAdminList() {
            this.$store.dispatch('organization/getSimOrgAct', {
                //page: 1,
                //pageSize: 1000,
                id: 0,
                includeMember: this.includeMember || 0
            }).then((res) => {
                let newRes = []
                res.map(n => {
                    n.id = String(n.id)
                    newRes.push(n)
                })
                this.bufferData = newRes
                this.orgList = newRes
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        async getItemDate(id, lab) {
            let st = false
            for (let i = 0; i < this.checkIdListBuffer.length; i++) {
                if (id == this.checkIdListBuffer[i]) {
                    st = true
                    break
                }
            }
            this.$store.dispatch('organization/getSimOrgAct', {
                page: 1,
                pageSize: 1000,
                id: id,
                includeMember: this.includeMember || 0
            }).then(async (res) => {
                res.map(n => {
                    n.id = String(n.id)
                })
                if (lab == 'A') {
                    this.actId[0] = id
                    this.selectBDataes = res
                    this.selectCDataes = ''
                    this.selectDDataes = ''
                } else if (lab == 'B') {
                    this.actId[1] = id
                    this.selectCDataes = res
                    this.selectDDataes = ''
                } else if (lab == 'C') {
                    this.actId[1] = id
                    this.selectDDataes = res
                }
                if (!st) {
                    this.checkIdListBuffer = [...this.checkIdListBuffer, id]
                    this.bufferData = [...this.bufferData, ...res]
                }
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
            console.log(999, this.checkIdListBuffer)
        },
        // 如果在bufferData中找到了对应的数据 则删掉
        inspectBufferData(findData) {
            for (let i = 0; i <= this.bufferData.length; i++) {
                findData.map(n => {
                    if (n.id == this.bufferData[i].id) {
                        this.bufferData.splice(i, 1)
                    }
                })
            }
        },
        // 关闭下拉
        closeHandle() {
            if (this.dialogVisible, this.selectOpen) {
                this.selectOpen = false
                this.$emit('getValue', this.checkList)
            }
        },
        // 下拉
        selectHandle() {
            this.initCheckList()
            if (this.selectOpen) {
                this.selectOpen = false
                this.$emit('getValue', this.checkList)
                let idList = []
                this.checkList.map(n => {
                    idList.push(n.id)
                })
                this.checkDataList = idList
            } else {
                this.selectOpen = true
            }
            console.log(8888, this.checkDataList)
        },
        delCheck(it) {
            const num = this.checkList.indexOf(it)
            num != -1 ? this.checkList.splice(num, 1) : null
        },
        // 选中 子集关闭
        checkListHander(val, st) {
            if (val == this.actId[0] || val == this.actId[1]) {
                if (st == 'A') {
                    this.checkListSet(this.selectBDataes)
                    this.selectBDataes = ''
                    this.selectCDataes = ''
                    this.actId[0] = ''
                } else {
                    this.checkListSet(this.selectCDataes)
                    this.selectCDataes = ''
                    this.actId[1] = ''
                }
            }
            this.$emit('getValue', this.checkList)
        },
        // 初始化数据
        initCheckList() {
            this.checkDataList = []
            console.log(3434, this.checkDataList, this.checkListDataes)
            if (this.checkListDataes && this.checkListDataes.length > 0) {
                if (this.checkListDataes[0].id) {
                    this.checkList = this.checkListDataes
                } else {
                    this.checkList = this.checkListDataes.map(n => {
                        return {
                            id: String(n.objectId),
                            name: n.objectName,
                            type: n.objectType
                        }
                    })

                }
            }
            if (this.checkList.length > 0) {
                this.checkDataList = this.idScreen(this.checkList)
            }
        },
        idScreen(list) {
            return list.map(n => n.id || n.objectId)
        },
        // 数据赛选
        checkListSet(obj) {
            obj.forEach(n => {
                this.checkList.forEach((h, j) => {
                    if (n.id == h.id) {
                        this.checkList.splice(j, 1)
                    }
                })
            })
        }
    }
}
</script>

<style scoped>
.show {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<style lang="scss">
.cascader {
    position: relative;

    .el-checkbox {
        margin-right: 0px;

        .el-checkbox__label {
            padding-left: 5px;
        }
    }

    .selectBox {
        border: solid 1px #ccc;
        position: relative;
        width: 175px;
        line-height: 12px;
        padding: 4px 10px;
        min-height: 30px;
        border-radius: 3px;
        cursor: pointer;

        .placeholder {
            font-size: 14px;
            line-height: 22px;
            color: #DCDFE6
        }

        .showItem {
            position: relative;
            display: inline-block;
            padding: 4px 10px;
            background: #DCDFE6;
            color: #666;
            margin: 4px 5px;
            border-radius: 3px;
            font-size: 12px;
            line-height: 12px;

            .all {
                font-size: 10px;
                font-style: normal;
            }

            .del {
                position: relative;
                display: none;
                right: -3px;
                font-size: 12px;
            }

            &:hover .del {
                display: inline-block;
            }
        }

        .lab {
            position: absolute;
            color: #ccc;
            top: 10px;
            right: 5px;
        }
    }

    .selectItemsBox {
        position: absolute;
        min-width: 100%;
        z-index: 3;
        background: #fff;
        display: inline-block;
        border: solid 1px #ccc;
        border-right: none;
        border-radius: 3px;
        margin-top: 10px;

        .seve {
            display: flex;
            border-right: solid 1px #ccc;
            justify-content: flex-end;
            font-size: 12;
            padding: 10px 0;
            border-top: solid 1px #e7e6e6;

            span {
                display: inline-block;
                padding: 4px 10px;
                font-size: 12px;
                color: #FFF;
                background: #3345ff;
                border-radius: 3px;
                margin-right: 10px;
                line-height: 16px;
                cursor: pointer;
            }
        }
    }

    .selectItems {
        display: flex;
        cursor: pointer;

        .itemsBox {
            flex: 1;
            top: 0px;
            left: 175px;
            font-size: 14px;
            border-right: solid 1px #ccc;
            min-width: 173px;
            max-height: 200px;
            overflow-y: scroll;

            .items {
                padding: 0px 10px;
                overflow: hidden;
                line-height: 18px;
                height: 18px;
                margin: 5px 0;

                .act {
                    color: #3345ff;
                }
            }

            .items:first-child {
                margin-top: 10px;
            }

            .items:last-child {
                margin-bottom: 10px;
            }
        }
    }
}
</style>
